<template>
  <div>
    <el-card>
      <!-- 顶部 -->
      <el-row type="flex" justify="space-between">
        <el-button type="primary" @click="addHouse">添加房产</el-button>
        <el-row type="flex" justify="end">
          <el-select v-model="category" placeholder="全部分类">
            <el-option
              v-for="item in AllcategoriesList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
          <el-select v-model="agent" placeholder="全部经纪">
            <el-option
              v-for="item in agentsList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <el-input v-model="title_contains" class="input-top" placeholder="请输入标题" />
          <el-button @click="search">筛选</el-button>
        </el-row>
      </el-row>
      <el-divider />
      <el-table :data="houseList" border>
        <el-table-column v-slot="{row}" label="封面">
          <!-- {{ row.photos[0] }} -->
          <img :src="row.photos[0]" alt="" width="100%">
        </el-table-column>
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="tags" label="标签" />
        <el-table-column prop="address" label="地址" />
        <el-table-column prop="category.title" label="分类" />
        <el-table-column prop="agent.name" label="经纪" />
        <el-table-column prop="price" label="价格" />
        <el-table-column prop="desc" label="介绍" />
        <el-table-column v-slot="{row}" prop="" label="图片">
          <img :src="row.photos[0]" alt="" width="50%" height="80px">
          <img :src="row.photos[1]" alt="" width="50%" height="80px">
        </el-table-column>
        <el-table-column prop="name" label="操作">
          <template v-slot="{row}">
            <el-row type="flex" justify="center">
              <el-button type="primary" size="small" @click="editHouse(row.id)">编辑</el-button>
              <el-button type="danger" size="small" @click="delFn(row.id)">删除</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        align="middle"
        :page-size="limit"
        @current-change="changeCur"
      />
    </el-card>
    <!-- 新增房产弹框 -->
    <addHouseDia ref="addHouseDia" :total="total" :show-dialog.sync="showDialog" @updateHouseList="getHouseList()" @updateTotal="total++" />
  </div>
</template>

<script>
import { getHouseNumber, delHouse } from '@/api/houseManager'
import addHouseDia from './components/addHouseDia.vue'
import { categoriesList } from '@/api/categories'// 获取全部分类列表
import { getHouseList } from '@/api/houseManager'// 获取房产列表
import { getAgentsList } from '@/api/agents'// 获取经纪列表
export default {
  components: {
    addHouseDia
  },
  data() {
    return {
      category: '', // 筛选相关分类, 传入分类 id
      agent: '', // 筛选相关经纪, 传入经纪 id
      title_contains: '', // 模糊搜索标题
      limit: 3,
      start: 1,

      total: 0,

      houseList: [], // 渲染房产列表的数组，
      agentsList: [], // 渲染下拉框经纪列表的数组
      AllcategoriesList: [], // 渲染全部的分类列表数组
      showDialog: false
    }
  },
  async created() {
    this.getHouseList()// 房产列表
    this.getAgentsList()// 经纪列表
    this.categoriesList()// 分类
    this.getHouseNumber()// 房产数量
  },
  methods: {
    async delFn(id) {
      this.$confirm('此操作将永久删除该文件, 删除?', '提示', {
        type: 'warning'
      }).then(async() => {
        if (this.houseList.length === 1 && this.limit < this.start) {
          this.start = this.start - this.limit
        }
        this.total--
        await delHouse(id)
        this.getHouseList()
      }).catch(() => {
        console.log('点击了取消')
      })
    },
    changeCur(currentPage) { // 分页改变
      console.log(currentPage)
      this.start = (currentPage - 1) * this.limit
      // 重新渲染
      this.getHouseList()
    },
    async search() {
      this.getHouseList()
      this.getHouseNumber()
    },
    async getHouseList() { // 房产列表
      const res = await getHouseList({
        _limit: this.limit || null,
        _start: this.start,
        title_contains: this.title_contains || null,
        agent: this.agent || null,
        category: this.category || null
      })
      console.log(res)
      this.houseList = res.data
    },
    async getHouseNumber() { // 房产数量
      const res = await getHouseNumber({
        title_contains: this.title_contains || null,
        agent: this.agent || null,
        category: this.category || null
      })
      console.log(128, res)
      this.total = res.data
    },
    async getAgentsList() {
      const res1 = await getAgentsList()
      this.agentsList = res1.data// 经纪列表
    },
    async categoriesList() {
      const res2 = await categoriesList()// 分类
      this.AllcategoriesList = res2.data
    },
    addHouse() {
      this.showDialog = true
    },
    editHouse(id) {
      this.showDialog = true
      // console.log(this.$refs.addHouseDia.editHouse)
      this.$refs.addHouseDia.editHouse(id)
    }
  }
}
</script>

<style>

</style>
